import Component from "../Component.js";
import Type from "../../experience/db/Type.js";

const Draw = ol.interaction.Draw;
const Snap = ol.interaction.Snap;


export default class Track extends Component{
    constructor() {
        super();

        this.draw = null;
        this.snap = null;
        this.status = true;
    }

    cancel() {
        this.status = true;
        this.emitter.emit("restore-slector");
        this.drawer.removeInteraction(this.snap);
        this.drawer.removeInteraction(this.draw);
        this.drawer.source(Type.Modify).clear();

        this.$$("#track-add").css("background-color", "var(--primary-color)");
        this.$$("#track-add").html("巷道轨迹");
        this.toast("增加巷道轨迹动作取消。");
    }

    add() {
        this.status = !this.status;

        // 取消状态
        if (this.status) {
            this.cancel();
            return;
        }

        // 非取消状态
        this.$$("#track-add").css("background-color", "rgb(255, 0, 0, 1)");
        this.$$("#track-add").html("取消编辑");

        this.toast('添加一条轨迹线,双击结束; 点击Esc回退。')

        // 这里要发个消息阻止选择器
        this.emitter.emit("prevent-slector");

        const config = this.algo.getConfig();
        const mode = this.utils.getLocalStorage("mode");

        this.drawer.source(Type.Modify).clear();
        this.draw = new Draw({ source: this.drawer.source(Type.Modify) , type: 'LineString' });
        this.drawer.addInteraction(this.draw);
        this.snap = new Snap({ source: this.drawer.source(Type.Track) })
        this.drawer.addInteraction(this.snap);

        const self = this;
        window.onkeydown = function(event) {
            if (event.defaultPrevented) return;

            let handled = false;
            if (event.key === "Escape") {
                handled = true;
                self.draw.removeLastPoint();
            }

            if (handled) event.preventDefault();
        }

        this.draw.on('drawend', async (event) => {
            const coordinates = event.feature.getGeometry().getCoordinates();
            coordinates.forEach(point => {
                point[0] = this.algo.denormalX(point[0]);
                point[1] = this.algo.denormalY(point[1]);
            })

            const data = await this.api.addTrack({
                meta_id: config.meta_id,
                type: mode,
                points: coordinates
            });

            if (data.code === 0) {
                await this.db.refresh(Type.Track, data.data);
                await this.drawer.draw(Type.Track);
            }

            this.cancel();
            window.onkeydown = null;
        });
    }

    async delete() {
        const id = this.emitter.params[0], self = this;
        const dialog = self.app.dialog.create({
            title: "提示",
            text: "请选择需要进行的操作？",
            buttons: [
                {
                    text: "删除轨迹",
                    onClick: () => {
                        self.app.dialog.confirm('确认将服务器的数据删除?', async () => {
                            const config = self.algo.getConfig();
                            const data = await self.api.delTrack({
                                id: id, meta_id: config.meta_id
                            });

                            if (data.code === 0) {
                                await self.db.refresh(Type.Track, data.data);
                                await self.drawer.draw(Type.Track);
                            }
                        });
                        this.emitter.emit("cancel-selected");
                        this.emitter.locked = false;
                        dialog.close();
                    }
                }, {
                    text: "取消操作",
                    onClick: () => {
                        this.emitter.emit("cancel-selected");
                        this.emitter.locked = false;
                        dialog.close();
                    }
                },
            ],
            verticalButtons: false
        }).open();
    }

    template() { }

    control() {
        // 接收选择器发送过来的消息
        this.emitter.on("track-deleted", async () => {
            this.emitter.locked = true;
            await this.delete();
        });

        this.emitter.on("emit-track-add", async () => {
            this.add();
        });

        this.$$("#track-add").on("click", () => {
            this.add();
        });

        this.$$("#car-track-cancel").on("click", async () => {
            this.popup.close();
        });
    }
}